<template>
	<a-row  class=''>
		<div  class='introduce-bg'></div> 
		<a-row  class='main mt28'>
			<a-col  :span='4'>
			   <ul  class='contactnav' >
			   	<li  v-for='(item,index)  in  navdata' :key='index'  :class='{active:index==currentIndex}'   @click='chooseNav(index)'>{{item.title}}</li> 
			   </ul>
		  	</a-col>
		  	<a-col :span='20' > 
			  	<div  class='  content'  v-if='currentIndex==0'>
			  		 <div  class='color-main  aboutus'><span  style="padding:0 20px"  class='about  inline-block'>公司简介</span></div>
			  		 铭帛科技主要是围绕与同安金所战略合作的框架下专属渠道推荐安金所挂牌产品及铭帛科技深耕供应链金融的核心内容。
			  	</div>
			  	<div  class='  content'  v-if='currentIndex==1'>
			  		 <div  class='color-main  aboutus'><span  style="padding:0 20px"  class='about  inline-block'>服务介绍</span></div>
			  		 铭帛科技主要业务分为在售产品推荐区、可推荐资产区、发布信息合作区等3个主要板块。
			  	</div>
			  	<div  class='  content' v-if='currentIndex==2'>
			  		 <div  class='color-main  aboutus'><span  style="padding:0 20px"  class='about  inline-block'>联系我们</span></div>
			  		 电话：0571-89996201 <br>
			  		 邮箱：https://exmail.qq.com <br>
			  		 地址：杭州市江干区华润大厦B座2601
			  	</div>
		  	</a-col>
	  	</a-row>
	</a-row>
</template>

<script>
export default {
	name:'company_introduce',
	data(){
		return {  
			navdata:[
				{title:'公司简介'},
				{title:'服务介绍'},
				{title:'联系我们'},
			],
			currentIndex:0,
		}
	},
	created(){ 
		let hash = this.$route.hash.split('#')[1] 
		// console.log(hash)
		this.currentIndex = hash-1
	},
	methods:{ 
	    chooseNav(index){
	    	this.currentIndex=index 
	    }
	},

}
</script>

<style scoped="scoped">
.main{width: 1200px;margin:0 auto;padding:0 0 30px;}
.content{margin-left: 50px;vertical-align: top;min-height: 330px;padding:30px 50px;background-color: #fff;}

/*关于我们 - title*/
 .aboutus{margin:0 auto 20px;text-align: center;font-size: 18px;width: 400px;} 
 .aboutus::before{display:inline-block;content:'';width: 120px;border-top:1px solid #008cd6;transform: translateY(-7px);-ms-transform:translateY(-7px);}
 .aboutus::after{display:inline-block;content:'';width: 120px;border-top:1px solid #008cd6;transform: translateY(-7px);-ms-transform:translateY(-7px);}

   /* For demo */
  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 320px;
    line-height: 320px;
    background: #364d79;
    overflow: hidden;
  }

  .ant-carousel >>> .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }
  .ant-carousel >>> .custom-slick-arrow:before {
    display: none;
  }
  .ant-carousel >>> .custom-slick-arrow:hover {
    opacity: 0.5;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
 /*左侧导航*/
.contactnav{background-color: #fff;}
.contactnav li{padding:14px 0;font-size: 16px;text-align: center;}
.contactnav li:hover{color: #1468b5;cursor: pointer;}
.contactnav li.active{background-color: #1468B5;color: #fff;}

.introduce-bg{height: 300px;background: url(../../assets/img/home/introduce_detail.png) no-repeat  center;}
</style>